<template>
  <section class="py-12">
    <div class="container mx-auto px-4">
      <h2 class="text-2xl font-bold text-zinc-900 mb-8">Source Code</h2>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <a
          v-for="project in projects"
          :key="project.id"
          :href="project.href"
          class="block group cursor-pointer"
        >
          <div
            class="rounded-xl border bg-white shadow overflow-hidden transition-all hover:shadow-md"
          >
            <div class="p-0 overflow-hidden">
              <div class="relative h-48 w-full">
                <img :src="project.image" :alt="project.title" class="w-full h-full object-cover" />
                <div
                  class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"
                >
                  <h3 class="text-white font-medium">{{ project.title }}</h3>
                </div>
              </div>
            </div>
            <div class="p-3 flex flex-col items-start gap-1 bg-white">
              <h3 class="font-medium text-sm text-zinc-900">{{ project.title }}</h3>
              <p class="line-clamp-2 text-xs text-zinc-700">{{ project.description }}</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const projects = [
  {
    id: 1,
    title: 'Free Online Games Platform',
    description:
      'Modern HTML5 gaming platform with responsive design, multiple game categories, and instant play functionality',
    image: 'https://ext.same-assets.com/4187681461/2546818234.jpeg',
    href: '/project/1',
  },
  {
    id: 2,
    title: 'Food Subscription Site',
    description:
      'Complete food subscription website with user registration, meal plan selection, payment system and admin dashboard',
    image: 'https://ext.same-assets.com/4187681461/1142676885.jpeg',
    href: '/project/2',
  },
  {
    id: 3,
    title: 'E-commerce Platform',
    description:
      'Full-featured e-commerce platform source code with product management, shopping cart, checkout process, and order tracking',
    image: 'https://ext.same-assets.com/4187681461/522148967.jpeg',
    href: '/project/3',
  },
  {
    id: 4,
    title: 'Learning Portal',
    description:
      'Online learning platform with course management, video playback, progress tracking and student management',
    image: 'https://ext.same-assets.com/4187681461/202717062.jpeg',
    href: '/project/4',
  },
  {
    id: 5,
    title: 'Social Media App',
    description:
      'Social media application source code supporting user profiles, feed posts, comments, and instant messaging',
    image:
      'https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400&h=300&fit=crop&auto=format',
    href: '/project/5',
  },
  {
    id: 6,
    title: 'Booking System',
    description:
      'Booking system source code with calendar view, room/service selection, and online payment functionality',
    image: 'https://ext.same-assets.com/4187681461/703086050.bin',
    href: '/project/6',
  },
]
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
